 <div class="col-lg-6">
	<div class="panel panel-default">
		<div class="panel-body" style = "background: #CEE3F6">
			<div class="col-xs-12"><h2>Nuevo Rol</h2><br/></div>
			<div class="col-xs-12">
				<form id ="myForm" role="form" action="insertar_registro.php" onsubmit="return validar()" method="post">
					<div class="form-group col-xs-4" id="cedula">
						<label>Cédula&nbsp;<span class="glyphicon glyphicon-asterisk" style="font-size: 0.8em;"/></label>
						<input type="text" maxlength="9" class="form-control" name="cedula" required>
					</div>
					<div class="form-group col-xs-8">
						<label>Rol&nbsp;<span class="glyphicon glyphicon-asterisk" style="font-size: 0.8em;"/></label>
						<select class="form-control" id="tipoRol" name ="tipoRol" required>
							<option></option>
							<option>Coordinador de Centro</option>
							<option>Coordinador de Materia</option>
							<option>Jefe de Departamento</option>
						</select>
					</div>
					
					<div class="col-xs-12"></div>
					<div class="form-group col-xs-5" id="fecha_desdeD">
						<label for="fecha_desde">Desde&nbsp;<span class="glyphicon glyphicon-asterisk" style="font-size: 0.8em;"/></label>
						<input type="text" class="form-control" name="fecha_desde" id="fecha_desde" required>
					</div>
					<div class="form-group col-xs-5 col-xs-offset-2" id="fecha_hastaD">
						<label for="fecha_hasta">Hasta&nbsp;<span class="glyphicon glyphicon-asterisk" style="font-size: 0.8em;"/></label>
						<input type="text" class="form-control" name="fecha_hasta" id="fecha_hasta" required>
					</div>

					<div class="form-group col-xs-4">
			          	</br><label><span class="glyphicon glyphicon-asterisk" style="font-size: 0.8em;"/>&nbsp;Campos obligatorios</label>
					</div>
					<div class="col-xs-12"></br></div>
					<div class="col-xs-4"></div>
					<div class="col-xs-4">	
						<button type="submit" id="agregar" class="btn btn-primary form-control">Agregar</button>
					</div>
					<div class="col-xs-4"></div>
					<div class="col-xs-12"></br></div>
					<input type="hidden" name="tabla" value="rol">
				</form>
			</div> 
		</div>
	</div>
</div>

<!-- Seccion para mostrar los datos del profesor especificado por la cedula, si existe -->
<div class="col-lg-4">
    <div class="panel panel-default">
        <div id = "requerido" class="panel-body" style = "background: #CEE3F6">
        	<!-- Aqui se cargaran los datos del profesor especificado -->
        </div>
    </div>
</div>



<script type="text/javascript">

	function carga(p1, p2, p3)
	{
		var xxx = {
			dato: p1,
			tabla: p2,
			campo: p3
		};
	    $.ajax({type:"POST",url:"completar_rol.php",data: xxx, success:function(result){$("#requerido").html(result);}});
	}



	$('[name=cedula]').keyup(function (e) 
	{
		var code = $(this).val(); 

		if(/^[0-9]+$/.test(code))
		{
			$.post('validaciones.php', {'cedula':code}, function(data)
			{
				if(data=='NO')
				{
					$("#cedula").addClass("has-error");
					$("#cedula").removeClass("has-success");
				}
				else 
				{
					$("#cedula").removeClass("has-error");
					$("#cedula").addClass("has-success");

					carga($('[name=cedula]').val(), 'persona', 'ci');
				}
			});
		}
		else
		{
			$("#cedula").addClass("has-error");
			$("#cedula").removeClass("has-success");
		}
	});

	$('[name=fecha_desde]').click(function(){test= new JsDatePick({useMode:2, target: "fecha_desde", dateFormat: "%Y-%M-%d"})});

	$('[name=fecha_hasta]').click(function(){test= new JsDatePick({useMode:2, target: "fecha_hasta", dateFormat: "%Y-%M-%d"})});

	function get_month_value (month)
	{
		switch (month)
		{
			case "JAN": return 1;
						break;
			case "FEB": return 2;
						break;
			case "MAR": return 3;
						break;
			case "APR": return 4;
						break;
			case "MAY": return 5;
						break;
			case "JUN": return 6;
						break;
			case "JUL": return 7;
						break;
			case "AUG": return 8;
						break;
			case "SEP": return 9;
						break;
			case "OCT": return 10;
						break;
			case "NOV": return 11;
						break;
			case "DEC": return 12;
						break;
			default: return -1;
		}
	}

	function validar_fechas()
	{
		var fechas = true;
		var fecha_desde= $('[name=fecha_desde]').val();
		var fecha_hasta= $('[name=fecha_hasta]').val();
		var tokens_desde= fecha_desde.split("-");
		var tokens_hasta;

		if (tokens_desde.length!=3)
			fechas= false;
		else
		{
			if (!isNaN(tokens_desde[0]) && !isNaN(tokens_desde[2]))
			{
				if (tokens_desde[1]!="JAN" && tokens_desde[1]!="FEB" && tokens_desde[1]!="MAR" && tokens_desde[1]!="APR" && tokens_desde[1]!="MAY" && tokens_desde[1]!="JUN" && tokens_desde[1]!="JUL" && tokens_desde[1]!="AUG" &&
					tokens_desde[1]!="SEP" && tokens_desde[1]!="OCT" && tokens_desde[1]!="NOV" && tokens_desde[1]!="DEC")
					fechas= false;
				else
				{
					// Ahora vamos a validar que la fecha_hasta este correcta
						tokens_hasta= fecha_hasta.split("-");

						if (tokens_hasta.length!=3)
							fechas= false;
						else
						{
							if (!isNaN(tokens_hasta[0]) && !isNaN(tokens_hasta[2]))
							{
								if (tokens_hasta[1]!="JAN" && tokens_hasta[1]!="FEB" && tokens_hasta[1]!="MAR" && tokens_hasta[1]!="APR" && tokens_hasta[1]!="MAY" && tokens_hasta[1]!="JUN" && tokens_hasta[1]!="JUL" && tokens_hasta[1]!="AUG" &&
									tokens_hasta[1]!="SEP" && tokens_hasta[1]!="OCT" && tokens_hasta[1]!="NOV" && tokens_hasta[1]!="DEC")
									fechas= false;
							}
						}
					
				}
			}
		}

		// Llegados a este punto, deberiamos saber el resultado de la validez de las fechas
		if (fechas)
		{
			// Ahora validemos que las mismas no sean incoherentes
			if (tokens_desde[0]>tokens_hasta[0])
				fechas= false;
			else
			{
				mes_desde= get_month_value (tokens_desde[1]);
				mes_hasta= get_month_value (tokens_hasta[1]);

				if (mes_desde>mes_hasta)
					fechas= false;
				else
				{
					if (tokens_desde[2]>tokens_hasta[2])
						fechas= false;
				}
			}
		}

		return fechas;
	}

	function fecha_inicio_invalida()
	{
		$("#fecha_desdeD").addClass("has-error");
	}

	function fecha_inicio_valida()
	{
		$("#fecha_desdeD").removeClass("has-error");
	}

	function fecha_fin_invalida()
	{
		$("#fecha_hastaD").addClass("has-error");
	}

	function fecha_fin_valida()
	{
		$("#fecha_hastaD").removeClass("has-error");
	}

	$('[name=fecha_desde]').change(function(){if(validar_fecha_inicio()) fecha_inicio_valida();else fecha_inicio_invalida()});
	$('[name=fecha_hasta]').change(function(){if(validar_fecha_fin()) fecha_fin_valida();else fecha_fin_invalida()});

	function validar()
	{
		var cedula_valida = true;

		if($("#cedula").hasClass("has-error")) cedula_valida = false;

		return (cedula_valida && validar_fechas());
	}
	
</script>